<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Insert title here</title>
<script type="text/javascript" src="../../js/jquery-1.11.1.min.js"></script>
<%--<link type="text/css" href="../../lib/layui-v2.0.2/css/layui.css" rel="stylesheet">
<script type="text/javascript" src="../../lib/layui-v2.0.2/layui.all.js"></script>--%>
<style type="text/css">
	.usemess{
		width: 400px;
		border: 1px solid #ccc;
		background-color: white;
		position: absolute;
		left: 200px;
		top: 70px;
		padding: 5px 10px;
		font-size: 16px;
	}
	.usemess>p{
		border-bottom:  1px solid #ccc;
		padding-bottom: 5px;
	}
	.usemess>div{
		padding-top: 5px;
		font-size: 14px;
	}
	.usemess>div>label{
		width:60px;
		text-align: center;
		display: inline-block;
		margin:5px 0;
	}
	.usemess>div input{
		display: inline-block;
		width:120px;
		text-align: left;
		border:1px solid #ccc;
		padding: 2px;
		margin:5px 10px 5px 0;
	}
	.usemess>button{
		text-align: center;
		padding: 3px 12px;
		border: 1px solid #ccc;
		border-radius: 3px;
		margin-left: 80px;
		margin-top: 10px;
		margin-bottom: 10px;
	}
</style>
</head>
<body>
<p><input type="text" name="username" placeholder="请输入用户名" id="search"/>
	<input type="text" name="address" placeholder="请输入地址" id="search1"/>
	<button onclick="searchUser()">搜索</button>
</p>
	<table class="layui-table" style="width: 800px">
	  <thead>
	    <tr>
	      <th>ID</th>
		  <th>用户名</th>
		  <th>密码</th>
		  <th>电话</th>
		  <th>地址</th>
		  <th>分数</th>
		  <th>操作</th>
	    </tr>
	  </thead>
	  <tbody id="tbody">

	  </tbody>
	</table>

<div class="usemess"  style="display:none;" >
	<p>显示/修改用户信息</p>
	<div>
		<label style="display:none;">id</label><span style="display:none;"><input type="text" name="id"></span>
		<label>用户名</label><span><input type="text" name="username"></span>
		<label>密码</label><span><input type="text" name="password"></span>
		<label>电话</label><span><input type="text" name="phone"></span>
		<label>地址</label><span><input type="text" name="address"></span>
		<label>分数</label><span><input type="text" name="score"></span>
	</div>
	<button onclick="chgMess()">确认</button><button onclick="hideMess()">取消</button>
</div>
</body>
<script type="text/javascript">
	$(function () {
		searchUser();
	})

	function searchUser() {
		var search=$("#search").val();
		var address=$('#search1').val();
		$.ajax({
			url: "/user/tableList?username="+search+"&address="+address,
			async: true,
			type: "get",
			dataType: "json",
			success: function (response) {
				if(response.length>0){
					var tbody=$("#tbody");
					tbody.empty();
					for(var i=0;i<response.length;i++){
						var trs="<tr>" +
								"<td>"+response[i].id+"</td>"+
								"<td>"+response[i].username+"</td>" +
								"<td>"+response[i].password+"</td>" +
								"<td>"+response[i].phone+"</td>" +
								"<td>"+response[i].address+"</td>" +
								"<td>"+response[i].score+"</td>" +
								"<td><a onclick='editMess(this)'>编辑</a>|<a onclick='delUser(this)'>删除</a></td>" +
								"</tr>";
						tbody.append(trs);
					}
				}
			}
		});
	}

	function chgMess() {
		var id=$(".usemess input[name='id']").val();
		var username=$(".usemess input[name='username']").val();
		var password=$(".usemess input[name='password']").val();
		var phone=$(".usemess input[name='phone']").val();
		var address=$(".usemess input[name='address']").val();
		var score=$(".usemess input[name='score']").val();
		console.log(id+" "+username+" "+password+" "+phone+" "+address+" "+score);

		$.ajax({
			url: "/user/chgMess",
			async: true,
			type: "post",
			data:{id:id,username:username,password:password,phone:phone,address:address,score:score},
			dataType: "json",
			success: function (response) {
				if(response){
					window.location.href="/limit";
				}else{
					alert("修改失败！");
				}

			}
		});
	}

	function hideMess() {
		$(".usemess").css("display","none");
	}

	function editMess(btn) {
		$(".usemess").css("display","");
		var id = $(btn).parent().siblings().eq(0).text();
		$.ajax({
			url: "/user/divList?id="+id,
			async: true,
			type: "get",
			dataType: "json",
			success: function (response) {
				if(response!=null){
					$(".usemess input[name='id']").val(response.id);
					$(".usemess input[name='username']").val(response.username);
					$(".usemess input[name='password']").val(response.password);
					$(".usemess input[name='phone']").val(response.phone);
					$(".usemess input[name='address']").val(response.address);
					$(".usemess input[name='score']").val(response.score);
				}

			}
		});
	}

	function delUser(btn) {
		var flag=confirm("确认删除该数据？");
		if(flag) {
			var id = $(btn).parent().siblings().eq(0).text();

			$.ajax({
				url: "/user/delUser",
				async: true,
				type: "post",
				data: {id: id},
				dataType: "json",
				success: function (response) {
					console.log(response);
					if (response) {
						window.location.href = "/limit";
					} else {
						alert("删除失败");
					}
				}
			});
		}
	}

</script>
</html>